<template>
  <div class="topnav">
    <!-- {{userinfo}} -->
    <b-navbar toggleable="lg" type="dark" variant="dark">
      <b-container fluid>
        <b-navbar-brand :to="{ name: 'Home' }">未来社区</b-navbar-brand>
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
        <b-collapse id="nav-collapse" class="justify-content-between" is-nav>
          <b-navbar-nav>
            <b-nav-item :to="{ name: 'Classify' }">话题分类</b-nav-item>
            <b-nav-item href="#">我参与的话题</b-nav-item>
          </b-navbar-nav>
          <b-navbar-nav class="ml-auto">
            <b-nav-form class="_seach _nav">
              <label v-for="(item, index) in Antistop" :key="index"
                ><input
                  @click="antistop(item.value)"
                  type="radio"
                  name="type"
                  :value="item.value"
                  checked
                />
                {{ item.antistop }}</label
              >
              <b-form-input
                size="sm"
                class="mr-sm-2"
                placeholder="查询"
                v-model="body"
              ></b-form-input>
              <b-button size="sm" class="text-nowrap" @click="btninquire">查询</b-button>
            </b-nav-form>
            <b-nav-item-dropdown right>
              <template #button-content>
                <b-img
                  thumbnail
                  fluid
                  :src="userinfo.avatar"
                  width="35"
                  alt="Image 1"
                ></b-img>
                <span class="user-margin">{{ userinfo.username }}</span>
              </template>
              <b-dropdown-item :to="{ name: 'Usercenter' }">个人信息</b-dropdown-item>
              <b-dropdown-item @click="showModal2(1)">修改头像</b-dropdown-item>
              <b-dropdown-item @click="showModal2(2)">信息修改</b-dropdown-item>
              <b-dropdown-item @click="outauth">退出</b-dropdown-item>
            </b-nav-item-dropdown>
          </b-navbar-nav>
        </b-collapse>
      </b-container>
    </b-navbar>
    <Modal ref="shou" />
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Modal from "../components/Modal.vue";
export default {
  name: "topnav",
  data() {
    return {
      userimg: require("../assets/zhuzhu.jpeg"),
      n: 10,
      img: [],
      body: "", //查询
      Antistop: [
        { antistop: "标题查询", value: "1" },
        { antistop: "内容查询", value: "2" },
      ],
      off: true,
    };
  },
  components: {
    Modal,
  },
  methods: {
    ...mapMutations(["upuserinfo"]),
    showModal2(index) {
      this.$refs["shou"].showModal(index);
    },
    async upuser() {
      let userpersonal = await this.$Api.personal(); //获取用户信息
      this.upuserinfo(userpersonal.data.data); //信息存到vuex种
    },
    async btninquire() {
      let params = null;
      if (this.off) {
        params = {
          body: this.body,
        };
      } else {
        params = {
          title: this.body,
        };
      }
      let res = await this.$article.article(params);
      // console.log(res.data.data);
      this.$store.commit("article/upacticle", res.data.data);
      let data = res.data.data.slice(0, 8);
      // console.log(data);
      this.$store.commit("article/updatapage", data);
      // console.log(this.article.datapage);
    },
    //选择查询模式
    antistop(val) {
      if (val != 2) {
        this.off = false;
      }
    },
    async outauth() {
      await this.$Api.outLogin();
      localStorage.removeItem("userinfo");
      setTimeout(() => {
        this.$router.push({ name: "Login" });
      }, 500);
    },
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  created() {
    this.upuser();
  },
};
</script>

<style lang="scss">
.topnav {
  ._seach {
    form {
      display: flex;
      input {
        margin-right: 5px;
        max-width: 300px;
      }
    }
  }
  ._nav {
    margin-top: 10px;
    .input {
      margin-right: 5px;
    }
    .form-inline {
      label {
        display: flex;
        align-items: center;
        width: 150px;
      }
    }
  }
  .user-margin {
    margin-left: 5px;
  }
  ._jumbotron-border {
    padding: 10px;
    border-top: none;
    border: 1px solid #8989;
    border-radius: 15px;
  }
  ._b {
    font-size: 20px;
  }
}
</style>
